<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>openlayer</title>
  <link rel="stylesheet" type="text/css" href="../../lib/openLayers/6.5.0/ol.css" >
  <script type="text/javascript" src="../../lib/openLayers/6.5.0/ol.js"></script>
  <script type="text/javascript" src="../../js/OpenLayersUtil.js"></script>
  <style>
    .map {
      height: 900px;
      width: 100%;
    }
  </style>
</head>
<body>
  <input type="radio" id="addFeatures" name="cluster" />添加聚合标注
  <input type="radio" id="removeFeatures" name="cluster" />移除聚合标注
  <div id="map" class="map"></div>
  <script>
    var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        center: [0, 0],
        zoom: 3
      })
    });

    //此示例创建10000个要素
    // var features = new Array(count);
    //矢量要素数据源
    var sources = new ol.source.Vector();
    var count = 10000,e = 4500000;
    for(var i = 0; i < count; i++){
      sources.addFeature(new ol.Feature({
        geometry: new ol.geom.Point([2*e*Math.random()-e, 2*e*Math.random()-e])
      }));
    }

    //聚合标注数据源
    var clusterSource = new ol.source.Cluster({
      //聚合的距离参数，即当标注间距离小于此值时进行聚合，单位是像素
      distance: 40,
      //聚合的数据源，即矢量要素数据源对象
      source: sources
    });
    //加载聚合标注的矢量图层
    var clusters = new ol.layer.Vector({
      source: clusterSource,
      style: function (feature, resolution){
        var size = feature.get('features').length;          //获取该要素所在聚合群的要素数量
        return [
          new ol.style.Style({
            image: new ol.style.Circle({
              radius: 10,
              stroke: new ol.style.Stroke({
                color: '#fff'
              }),
              fill: new ol.style.Fill({
                color: '#d70303'
              })
            }),
            text: new ol.style.Text({
              text: size.toString(),
              // text: properties.num,
              /*fill: new ol.style.Fill({
                color: '#fff'
              }),*/
              // font: "18px",
              font: "bold 13px normal",
              textAlign: "center",  // 文本对齐方向，以线的中心点为基准。 'left', 'right', 'center', 'end' or 'start'. Default is 'center'.
              textBaseline: "middle", // 文本底部对齐方向，以线为基准。 'bottom', 'top', 'middle', 'alphabetic', 'hanging', 'ideographic'.
              offsetX: 0,
              offsetY: -12,
              fill: new ol.style.Fill({
                color: "#000000"
              }),
              stroke: new ol.style.Stroke({color: '#ab13de', width: 2})
            })
          })
        ];
      }
    });
    map.addLayer(clusters);

    //添加聚合标注
    document.getElementById('addFeatures').onclick = function(){
      map.addLayer(clusters);
      //当前聚合标注数据源中的要素
      /*var currentFeatures = clusterSource.getSource().getFeatures();
      //如果聚合标注数据源中没有要素，则重新添加要素
      if(currentFeatures.length == 0){
        clusterSource.getSource().addFeatures(features);
        clusters.setSource(clusterSource);
        map.addLayer(clusters);
      }*/
    }
    //移除聚合标注
    document.getElementById('removeFeatures').onclick = function(){
      map.removeLayer(clusters);              //移除标注图层
      // clusterSource.getSource().clear();        //移除聚合标注数据源中的所有要素
    }
  </script>

</body>
</html>